<!-- 首页展示的物品详情 -->
<template>
	<view class="item-detail">
		
		<!-- 发布物品信息 -->
		<view class="item-detail__info">
			
			<view class="item-detail__info-header flex">
				<text class="item-detail__info-name">白色水杯</text>
				<text>2025-01-08</text>
			</view>
			
			<view class="item-detail__info-address flex">
				<image class="item-detail__info-address-icon" src="/static/images/address.png" mode="aspectFill"></image>
				<text>华南师范大学一课南座206教室</text>
			</view>
			
			<view class="item-detail__info-imgs">
				<image class="item-detail__info-img" src="/static/images/items/白色水杯.jpg" mode="aspectFill"></image>
			</view>
			
			<view class="item-detail__info-desc">
				这是一个水杯
			</view>
			
		</view>
		
		<!-- 发布者信息 -->
		<view class="item-detail__user flex">
			
			<view class="item-detail__user-info flex">
				<image src="/static/images/avatar/userAvatar03.jpg" mode="aspectFill" class="item-detail__user-avatar"></image>
				<view class="item-detail__user-text flex-column">
					<text class="item-detail__user-name">小菜一碟</text>
					<text>发布者</text>
				</view>
			</view>
			
			<view class="item-detail__user-btn" @click="onClickToDetail">
				沟通
			</view>
		</view>
	</view>
</template>

<script setup>
		function onClickToDetail(){
		// console.log('点击消息详情');
		let id=1,messageName = '小菜一碟'
		uni.navigateTo({
			url:`/pages/user/userMessage/userMessageDetails/userMessageDetails?id=${id}&messageName=${messageName}`
		})
	}
</script>

<style lang="scss" scoped>
.item-detail{
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 0 30rpx;
	background-color: #f2f2f2;
	padding-top: 30rpx;
	
	&__info{
		width: 100%;
		box-sizing: border-box;
		padding:60rpx;
		padding-bottom: 30rpx;
		background-color: #fff;
		margin-bottom: 30rpx;
		border-radius: 20rpx;
		
		&-header{
			width: 100%;
			justify-content: space-between;
			font-size: 24rpx;
			color: #333333;
			margin-bottom: 26rpx;
		}
		
		&-name{
			font-size: 36rpx;
			font-weight: 700;
		}
		
		&-address{
			font-size: 18rpx;
			color: #797979;
			margin-bottom: 35rpx;
			&-icon{
				width: 30rpx;
				height: 30rpx;
				margin-right: 6rpx;
			}
		}
		
		&-imgs{
			padding-bottom: 32rpx;
			border-bottom: 3rpx solid #797979;
			margin-bottom: 30rpx;
		}
		
		&-img{
			width: 250rpx;
			height: 250rpx;
			border-radius: 20rpx;
		}
		
		&-desc{
			font-size: 24rpx;
			color: #333333;
		}
	}
	
	&__user{
		width: 100%;
		height: 140rpx;
		box-sizing: border-box;
		padding: 0 60rpx;
		background-color: #fff;
		border-radius: 20rpx;
		justify-content: space-between;
		
		&-info{
			
		}
		
		&-avatar{
			width: 80rpx;
			height: 80rpx;
			margin-right: 30rpx;
			border-radius: 50%;
		}
		
		&-text{
			font-size: 18rpx;
			color: #797979;
		}
		
		&-name{
			font-size: 36rpx;
			color: #333333;
		}
		
		&-btn{
			width: 139rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			border-radius: 20rpx;
			font-size: 28rpx;
			color: #333333;
			background-color: #b4ddee;
		}
	}
}
</style>
